<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle title="我的订单" :order="true" :mine="true"></headTitle>
		<view class="navbar bgfff flex-center-between">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" 
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData()">
					<!-- 空白页 -->
					<empty title="您还没有相关的订单" v-if="isEmpty"></empty>
					
					<order v-for="(item, index) in orderList" :key="index" :item='item' v-if="!isEmpty" :index='index' 
						@del='del' @cancel='cancel' @pay='pay' @confimOrder='confimOrder'></order>
					
					<uni-load-more :status="loadingType" :contentText="contentText" v-if="!isEmpty"></uni-load-more>
				</scroll-view>

			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import order from '@/components/order.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import empty from '@/components/empty'
export default {
	components: {
		uniLoadMore,
		empty,
		headTitle,
		order,
	},
	data() {
		return {
			isEmpty: false, // 不为空
			contentText: {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "已经是最后一个订单了"},
			tabCurrentIndex: 0,
			pageNum: 1,
			orderList:[],
			money: 0, // 立即付款选择支付方式使用
			headerPosition: 'fixed',
			loadingType: 'loading', //加载更多状态
			navList: [
				{
					status: 100,
					text: '全部',
					loadingType: 'loading',
					orderList: []
				},
				{
					status: 0,
					text: '待付款',
					loadingType: 'loading',
					orderList: []
				},
				{
					status: 1,
					text: '待发货',
					loadingType: 'loading',
					orderList: []
				},
				{
					status: 2,
					text: '待收货',
					loadingType: 'loading',
					orderList: []
				},
				{
					status: 3,
					text: '已完成',
					loadingType: 'loading',
					orderList: []
				},
			]
		};
	},

	onLoad(options) {
		/**
		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
		 * 替换onLoad下代码即可
		 */
		this.tabCurrentIndex = options.status === undefined ? 0 : +options.status
		this.loadData()
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed'
		} else {
			this.headerPosition = 'absolute'
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.pageNum =  1
		this.loadData('refresh')
	},
	methods: {
		//获取订单列表
		async loadData(type = 'add') {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex
			let navItem = this.navList[index]
			let status = navItem.status
			
				
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			} else {
				// 没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'loading'
					// this.loadingType = 'more'
				}
				
				let params = { pageIndex: this.pageNum, pageSize: 10 }
				if(status !== 100) {
					params.status = status
				}
				
				let isLoading = false
				if (type === 'refresh') {
					this.isEmpty = false
					this.orderList = []
					isLoading = true
				}
				let data = await Api.apiCall('get', Api.order.allOrderList, params, isLoading)
				if (type === 'refresh') {
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1000)
				}
				if(!data) return
				let orderList = data.recordList
				this.orderList = this.orderList.concat(orderList)
				
				if(this.orderList.length === 0) {
					// 显示无相关订单
					this.isEmpty = true
				}

				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = data.hasMore == 0 ? 'nomore' : 'more'
				
				this.pageNum += 1
			}
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current
			this.pageNum =  1
			this.loadData('refresh')
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index
		},
		// 删除数据
		del(index) {
			this.orderList.splice(index, 1)
		},
		// 取消
		cancel(index) {
			this.orderList[index].orderStatus = 4
		},
		// 立即付款
		pay(money, orderId) {
			this.money = money
			this.$common.navigateTo('/pages/money/money?type=order&orderId=' + orderId)
		},
		// 确认收货
		confimOrder(index) {
			this.orderList[index].orderStatus = 3
		},
	}
};
</script>

<style lang="scss">
page,
.container {
	background-color: #F7F7F7;
	height: 100%;
}

.swiper-box {
	height: calc(100% - 90rpx);
}
.list-scroll-content {
	height: 100%;
}

.navbar {
	height: 90rpx;
	padding: 0 40rpx;
	position: relative;
	border-bottom: 1rpx solid #eee;
	z-index: 10;
	.nav-item {
		height: 100%;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #AEA8A2;
		position: relative;
		&.current {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				background-color: #333;
				border-radius: 5rpx;
			}
		}
	}
}

.uni-swiper-item {
	height: auto;
}

/* load-more */
.uni-load-more {
	margin-top: 20rpx;
	background-color: #fff;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	height: 80upx;
	align-items: center;
	justify-content: center;
}
</style>
